<template>
	<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns" style="background-color:#F8F8F8;">
			<!-- 分类导航 -->
			<view class="header gui-border-b gui-border-box gui-flex gui-columns gui-justify-content-center" id="myheader">
				<gui-switch-navigation
					:size="180"
					:currentIndex="currentIndex"
					activeLineBg="linear-gradient(to right, #008AFF,#008AFF)"
					:items="tabs"
					@change="navchange"
				></gui-switch-navigation>
			</view>
			<swiper :current="currentIndex" @change="swiperChange" :style="{ height: mainHeight + 'px', width: '750rpx' }">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item v-for="(items, orderIndex) in orders" :key="orderIndex">
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view
						:scroll-y="true"
						:scroll-top="scrollTops[currentIndex]"
						:style="{ height: mainHeight + 'px' }"
						@touchstart="touchstart"
						@touchmove="touchmove"
						@touchend="touchend"
						@scrolltolower="loadmorefun"
						@scroll="scroll"
					>
						<!-- 刷新组件 -->
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<gui-empty v-if="items == null">
							<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image
									class="gui-empty-img"
									src="https://upload-images.jianshu.io/upload_images/15372054-1f849183cebb80b1.png?imageMogr2/auto-orient/strip|imageView2/2/w/388/format/webp"
								></image>
							</view>
							<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top" style="color:#9DABFF;">暂无数据</text>
						</gui-empty>
						<!-- 数据展示区域 -->
						<view class="gui-order" v-if="items != null" v-for="(order, oIndex) in items" :key="oIndex">
							<view class="lizhili-item">
								<text class="gui-primary-color lizhili-ding">订单号 : {{ order.out_trade_no }}</text>
								
								<text class="gui-order-number gui-color-red" v-if="order.lei==4">社区团购</text>
								<text class="gui-order-number gui-color-blue" v-if="order.lei==1">商城订单</text>
		
								
								
								<!-- <text class="gui-icons gui-text-small gui-color-gray" 
								@tap="removeorder(orderIndex, oIndex, order.out_trade_no)">&#xe632; 删除订单</text> -->
							</view>
							<!-- 循环展示订单 -->
							<view>
								<!-- 循环订单商品 -->
								<view class="gui-order-goods gui-flex">
									<view class="gui-order-goods-img"><gui-image :src="imgServer + order.goods_img" :width="100" :height="100"></gui-image></view>
									<text class="gui-order-goods-name">{{ order.goods_name }}</text>
									<text class="gui-order-goods-price">￥{{ order.goods_price }} x {{ order.order_num }}</text>
								</view>
							</view>
							<!-- 订单底部 -->
							<view class="gui-order-footer gui-flex gui-rows gui-space-between">
								<text class="gui-order-number">{{ order.create_time }}</text>

								<text v-if="order.pay_status == 0 && order.is_tui == 0" class="gui-order-btn gui-border gui-order-btn-red" @tap="fu(order.id)">去付款</text>
								<text v-if="order.pay_status == 1 && order.order_type == 0 && order.is_tui == 0" class="gui-order-btn gui-border gui-order-btn-red" @tap="cui">
									催发货
								</text>

								<text
									v-if="order.pay_status == 1 && order.order_type == 1 && order.is_tui == 0 && order.lei == 1"
									class="gui-order-btn gui-border gui-order-btn-lizhili"
									@tap="cha(order.kuaidi_on, order.kuaidi_name)"
								>
									查看物流
								</text>
								<text
									v-if="order.pay_status == 1 && order.order_type == 1 && order.is_tui == 0"
									class="gui-order-btn gui-border gui-order-btn-red"
									@tap="que(oIndex, order.out_trade_no, orderIndex)"
								>
									确认收货
								</text>
								<text v-if="order.pay_status == 1 && order.order_type == 2 && order.is_tui == 0" class="gui-order-btn gui-border gui-order-btn-red">已完成</text>

								<text v-if="order.is_tui == 1" class="gui-order-btn gui-border gui-order-btn-red">已退还</text>
							</view>
						</view>
						<!-- 加载组件 -->
						<gui-loadmore ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gui-page>
</template>
<script>
var graceJs = require('@/lizhili/js/grace.js');
let graceJS = require('@/lizhili/js/grace.js');
let common = require('@/common.js');
export default {
	data() {
		return {
			// 全屏 loading
			pageLoading: true,
			// 选项卡标签
			tabs: [
				{ id: 0, name: '全部订单' },
				// {id:1, name:'未付款'},
				{ id: 2, name: '待发货' },
				{ id: 3, name: '已发货' },
				{ id: 4, name: '已完成' }
			], // 选中选项的 索引
			currentIndex: 0,
			// 核心区域高度
			mainHeight: 200,
			// 订单信息保存数组
			orders: [[], [], [], []],
			// 每个选项卡对应的分页
			pages: [1, 1, 1, 1],
			// 每个选项卡内部的滚动区域滚动值
			scrollTops: [0, 0, 0, 0],
			// 滚动延迟
			scrollTimer: null,
			// 加载更多延迟
			loadMoreTimer: null,
			// api 加载状态记录
			apiLoadStatus: [false, false, false, false],
			imgServer: ''
		};
	},
	onLoad: function() {
		this.imgServer = common.obs;
		graceJs.getRefs('guiPage', this, 0, ref => {
			ref.getDomSize('guiPageBody', e => {
				graceJs.select('#myheader', e2 => {
					this.mainHeight = e.height - e2.height;
					this.getOrders();
				});
			});
		});
	},
	watch: {
		currentIndex: function(nVal, oldVal) {
			if (this.orders[nVal] == null) {
				return;
			}
			if (this.orders[nVal].length < 1) {
				this.getOrders();
			}
		}
	},
	methods: {
		cha(num, name) {
			uni.showModal({
				title: '物流信息',
				content: '快递公司：' + name + '，快递号：' + num + '！',
				success: function(res) {
					if (res.confirm) {
						uni.setClipboardData({
							data: 'num',
							success: function() {
								uni.showToast({
									icon: 'none',
									title: '已经复制，快递单号！'
								});
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		que(oIndex, out_trade_no, orderIndex) {
			uni.showModal({
				title: '确定要收货吗？',
				complete: e => {
					if (e.confirm) {
						uni.common.post(
							uni.common.apiServer + 'my',
							{
								type: 'update_order_shou',
								out_trade_no: out_trade_no
							},
							false,
							res => {
								if (res.code == 1) {
									this.orders[orderIndex].splice(oIndex, 1);
									uni.showToast({
										icon: 'none',
										title: '收货成功'
									});
								} else {
									uni.showToast({
										icon: 'none',
										title: '收货失败'
									});
								}
							},
							e => {
								console.log(e);
							}
						);
					}
				}
			});
		},
		fu(e) {
			//order_id
			uni.navigateTo({
				url: '../index/payorder?order_id=' + e
			});
		},
		cui() {
			setTimeout(() => {
				uni.showToast({
					title: '催单成功'
				});
			}, 1000);
		},
		// 分类切换
		navchange: function(e) {
			this.currentIndex = e;
		},
		// 轮播切换
		swiperChange: function(e) {
			this.currentIndex = e.detail.current;
		},
		// 滚动区域滚动
		scroll: function(e) {
			if (this.scrollTimer != null) {
				clearTimeout(this.scrollTimer);
			}
			this.scrollTimer = setTimeout(() => {
				this.scrollTops.splice(this.currentIndex, 1, e.detail.scrollTop);
			}, 100);
		},
		// 下拉刷新相关事件绑定
		touchstart: function(e) {
			if (this.apiLoadStatus[this.currentIndex]) {
				return;
			}
			if (this.scrollTops[this.currentIndex] > 0) {
				return;
			}
			this.$refs.refreshcom[this.currentIndex].touchstart(e);
		},
		touchmove: function(e) {
			if (this.apiLoadStatus[this.currentIndex]) {
				return;
			}
			if (this.scrollTops[this.currentIndex] > 0) {
				return;
			}
			this.$refs.refreshcom[this.currentIndex].touchmove(e);
		},
		touchend: function(e) {
			if (this.apiLoadStatus[this.currentIndex]) {
				return;
			}
			if (this.scrollTops[this.currentIndex] > 0) {
				return;
			}
			this.$refs.refreshcom[this.currentIndex].touchend(e);
		},
		// 刷新事件
		reload: function() {
			this.pages[this.currentIndex] = 1;
			this.$refs.loadmorecom[this.currentIndex].stoploadmore();
			this.getOrders(1);
		},
		// 加载更多事件
		loadmorefun: function() {
			var currentIndex = this.currentIndex;
			if (this.apiLoadStatus[currentIndex]) {
				return;
			}
			// 获取加载组件状态看一下是否还能继续加载
			if (this.$refs.loadmorecom[currentIndex].loadMoreStatus != 0) {
				return;
			}
			// 保证触底只执行一次加载
			if (this.loadMoreTimer != null) {
				clearTimeout(this.loadMoreTimer);
			}
			this.loadMoreTimer = setTimeout(() => {
				this.$refs.loadmorecom[currentIndex].loading();
				// 此处开启加载动画执行加载数据的函数
				this.getOrders();
			}, 80);
		},
		// 新闻数据读取
		getOrders: function(isReload) {
			// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
			var currentIndex = this.currentIndex;
			console.log(this.pages[currentIndex]);
			// 更新 api 加载状态
			this.apiLoadStatus.splice(currentIndex, 1, true);
			if (this.pages[currentIndex] == 1 && !isReload) {
				this.pageLoading = true;
			}

			console.log('类型 : ' + this.tabs[currentIndex].name + ' 第' + this.pages[currentIndex] + '页');

			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'get_order_list',
					page: this.pages[currentIndex],
					lei: this.tabs[currentIndex].id,
					xiao: 1
				},
				false,
				res => {
					if (res.code == 1) {
						for (let i in res.data) {
							res.data[i].create_time = common.to_time(res.data[i].create_time, 2);
						}
						if (this.pages[currentIndex] == 1) {
							this.orders.splice(currentIndex, 1, res.data);
						} else {
							this.orders[currentIndex] = this.orders[currentIndex].concat(res.data);
							this.$refs.loadmorecom[currentIndex].stoploadmore();
						}
					} else {
						if (this.pages[currentIndex] == 1) {
							console.log('empty');
							this.orders.splice(currentIndex, 1, null);
							this.$refs.loadmorecom[currentIndex].stoploadmore();
						} else {
							console.log('nomore');
							this.$refs.loadmorecom[currentIndex].nomore();
						}
					}
					if (isReload) {
						this.$refs.refreshcom[currentIndex].endReload();
					}
					this.pages[currentIndex]++;
					// 更新 api 加载状态
					this.apiLoadStatus.splice(currentIndex, 1, false);
					this.pageLoading = false;
				},
				e => {
					console.log(e);
				}
			);
		},
		// 删除订单
		// 参数 : orderIndex,   oIndex,  orderNumber
		//       数组第一层索引   订单索引     订单号码
		removeorder: function(orderIndex, oIndex, orderNumber) {
			console.log(oIndex, orderNumber);
			uni.showModal({
				title: '确定要删除此订单吗？',
				complete: e => {
					if (e.confirm) {
						uni.common.post(
							uni.common.apiServer + 'my',
							{
								type: 'del_order_list',
								out_trade_no: orderNumber
							},
							false,
							res => {
								if (res.code == 1) {
									this.orders[orderIndex].splice(oIndex, 1);
								} else {
									uni.showToast({
										icon: 'none',
										title: '删除失败'
									});
								}
							},
							e => {
								console.log(e);
							}
						);
					}
				}
			});
		}
	}
};
</script>
<style>
.lizhili-item{
	display: flex;
	 justify-content:space-between
}
.lizhili-ding {
	font-size: 30rpx;
	line-height: 1.8;
	margin-bottom: 25rpx;
	border-left: 5rpx solid #4fd1aa;
	padding-left: 20rpx;
}
.header {
	padding: 15rpx 30rpx;
	height: 100rpx;
}
.gui-order {
	background-color: #ffffff;
	padding: 20rpx;
	margin: 25rpx;
	margin-bottom: 0rpx;
	border-radius: 10rpx;
}
.gui-order-number {
	line-height: 2;
	font-size: 28rpx;
}
.gui-shop {
	line-height: 60rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
}
.gui-order-goods {
	flex-direction: row;
	flex-wrap: nowrap;
	padding-bottom: 20rpx;
}
.gui-order-goods-img {
	width: 100rpx;
	height: 100rpx;
}
.gui-order-goods-name {
	line-height: 40rpx;
	width: 200rpx;
	flex: 1;
	overflow: hidden;
	font-size: 28rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	color: #333333;
}
.gui-order-goods-price {
	font-size: 24rpx;
	line-height: 50rpx;
	color: #333333;
	width: 150rpx;
	text-align: right;
}
.gui-order-footer {
	margin-top: 2px;
}

.gui-order-status {
	line-height: 50rpx;
	color: #999999;
	font-size: 26rpx;
	width: 100rpx;
	text-align: center;
}
.gui-order-btn {
	width: 150rpx;
	height: 50rpx;
	line-height: 50rpx;
	color: #999999;
	font-size: 22rpx;
	text-align: center;
	border-radius: 60rpx;
	margin-left: 20rpx;
}
.gui-order-btn-red {
	border-color: #ff0036;
	color: #ff0036;
}
.gui-order-btn-lizhili {
	border-color: #868686;
	color: #868686;
}
</style>
